<template>
    <div>
        <el-page-header content="首页" icon="" :title="store.state.companyData.companyName"></el-page-header>
        <el-card class="box-card">
            <el-row>
                <el-col :span="4">
                    <el-avatar :size="100" :src="avatarUrl"></el-avatar>
                </el-col>
                <el-col :span="20">
                    <h3 class="right-text">欢迎 {{ store.state.user.username }} 回来,
                        {{ welcomeText }}
                    </h3>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>企业展示</span>
                </div>
            </template>
            <el-carousel v-if="loopList.length>6" :interval="4000" type="card" height="300px">
                <el-carousel-item v-for="(item, index) in loopList.slice(loopList.length-6,loopList.length)" :key="index">
                    <el-image class="imgs" :src="item.carouselAddress" fit="fill"></el-image>
                    <h3>{{ item.carouselTile }}</h3>
                </el-carousel-item>
            </el-carousel>
            <el-carousel v-else-if="loopList.length" :interval="4000" type="card" height="300px">               
                <el-carousel-item v-for="(item, index) in loopList" :key="index">
                    <el-image class="imgs" :src="item.carouselAddress" fit="fill"></el-image>
                    <h3>{{ item.carouselTile }}</h3>
                </el-carousel-item>
            </el-carousel>
        </el-card>
    </div>
</template>

<script setup>
import {useStore} from 'vuex';
import {computed,onMounted,ref} from 'vue'
import {allCarouselAPI} from '@/api'

const loopList=ref([])
const store=useStore()
const avatarUrl=computed(()=>store.state.user.avatar?store.state.user.avatar:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
const welcomeText=computed(()=> new Date().getHours()<12?'要开心每一天':'喝杯咖啡提提神吧')

onMounted(()=>{
    getAllCarousel()
    // getAllCompany()
})
// 获取全部用户信息
const getAllCarousel=async()=>{
    const {data:res}=await allCarouselAPI()
    if(res.status===0) loopList.value=res.carouselInfo
}

</script>

<style lang="scss" scoped>
    .box-card{
        margin-top:40px;
        .right-text{
            line-height: 70px;
        }
    }
    .el-carousel__item h3 {
        color: white;
        font-size: 14px;
        width:100%;
        text-align: center;
        position: absolute;
        font-weight: bold;
        bottom: 0px;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }
</style>